<template>
  <div>
    <el-table
      ref='table'
      :data="gridData"
      height="500"
    >
      <el-table-column
        property="name"
        label="用户名称"
        align="center"
      />
      <el-table-column
        property="date"
        label="浏览时间"
        align="center"
      />
      <template slot="append">
        <p
          v-if="!loading&&!noMore"
          @click="load()"
        >点击加载更多</p>
        <p v-if="loading">正在加载</p>
        <p v-if="noMore">没有更多了</p>
      </template>
    </el-table>

  </div>

</template>

<script>
export default {
  data() {
    return {
      totalPage: 5, // 总页数
      currentPage: 1, // 当前页数
      gridData: [
        {
          name: '王小虎',
          date: '2016-05-04'
        }, {
          name: '王小虎',
          date: '2016-05-04'
        }, {
          name: '王小虎',
          date: '2016-05-04'
        }, {
          name: '王小虎',
          date: '2016-05-04'
        }, {
          name: '王小虎',
          date: '2016-05-04'
        }
      ],
      loading: false, // 是否加载中
      noMore: false // 是否最后一页, 没有更多了
    }
  },
  mounted() {
    // 监听表格dom对象的滚动事件
    let dom = this.$refs.table.$el.querySelector('.el-table__body-wrapper')
    dom.addEventListener('scroll', () => {
      let { scrollHeight, scrollTop, clientHeight } = dom
      const scrollDistance = scrollHeight - scrollTop - clientHeight
      if (scrollDistance <= 0 && this.loading !== true) {
        // 等于0证明已经到底，可以请求接口
        this.load() // 加载数据
      }
    })
  },
  methods: {
    load() {
      this.loading = true
      if (this.currentPage < this.totalPage) { // 当前页数小于总页数就请求
        // 请求接口的代码, 将请求回来的数据和当前展示的数据合并在一起
        setTimeout(() => {
          this.gridData = this.gridData.concat([{
            name: '李四',
            date: '2016-05-04'
          }, {
            name: '李四',
            date: '2016-05-04'
          }, {
            name: '李四',
            date: '2016-05-04'
          }])
          console.log('增加了数据')
          this.currentPage++ // 当前页数自增
          this.loading = false
        }, 1000)
      } else {
        this.noMore = true
        this.loading = false
      }
    }
  }
}
</script>
